<link rel="stylesheet" href="/Static/mobile/vant/index.css">
<script src="/Static/mobile/vant/vue.min.js"></script>
<script src="/Static/mobile/vant/vant.min.js"></script>
<style>
.head {
    padding: 2em 0;
    /* background-color:#ED0C7A; */
    color:#FFF;
    background: -webkit-linear-gradient(135deg, #ED0C7A, #E8075F); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(135deg, #ED0C7A, #E8075F); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(135deg, #ED0C7A, #E8075F); /* Firefox 3.6 - 15 */
    background: linear-gradient(135deg, #ED0C7A, #E8075F); /* 标准的语法 */
}
.head span {
    font-size:2em;
}
.head p{
    font-size:1.2em;
}
</style>
<div id="app">
    <div class="head">
        <div style="text-align: center;margin:0 15%;border-bottom:1px dashed #FFB1C8;padding:0.5em 0;">
            <span><?=$data['all']?></span>
            <p>全部</p>
        </div>
        <div style="display: flex;padding:0.5em 0;">
            <div style="flex:1;text-align: center;border-right:1px dashed #FFB1C8;">
                <span><?=$data['day']?></span>
                <p>今日</p>
            </div>
            <div style="flex:1;text-align: center;">
                <span><?=$data['month']?></span>
                <p>本月</p>
            </div>
        </div>
    </div>
    <van-tabs v-model="tabActive" swipeable>
        <van-tab title="全部"></van-tab>
        <van-tab title="推荐奖"></van-tab>
        <van-tab title="区域奖"></van-tab>
        <van-tab title="年终奖"></van-tab>
    </van-tabs>
    <van-tabbar :fixed="false"  v-model="barActive">
        <van-tabbar-item >全部</van-tabbar-item>
        <van-tabbar-item >本月</van-tabbar-item>
        <van-tabbar-item >今日</van-tabbar-item>
    </van-tabbar>
    <van-list
        v-model="loading"
        :finished="finished"
        @load="onLoad"
    >
        <van-panel 
            v-for="item in log.list"
            :key="item.log_id"
            :title="item.content+'(下单人:'+item.nickname+')'"
            :desc="item.create_time" :status="(item.logtype==1?'+':'-')+item.money">
        </van-panel>
    </van-list>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            tabActive: 0,
            barActive: 0,
            log: {
                page:1,
                list: []
            },
            loading: false,
            finished: false
        },
        watch: {
            tabActive: function (val,oldval) {
                if(this.barActive==0) {
                    this.log = {
                        page:1,
                        list: []
                    };
                    this.finished = false;
                    this.onLoad();
                }else{
                    this.barActive = 0;
                }
            },
            barActive: function() {
                this.log = {
                    page:1,
                    list: []
                };
                this.finished = false;
                this.onLoad();
            }
        },
        mounted: function () {
        },
        methods: {
            onLoad: function() {
                this.loading = true;
                var self = this;
                $.get('/mobile/moneylists/moneydetail?page='+this.log.page+'&tab='+this.tabActive+'&bar='+this.barActive).then(function(res){
                    self.loading = false;
                    if(res.ret==1) {
                        self.finished = true;
                    }else{
                        for (var i = 0; i<res.data.length; i++) {
                            self.log.list.push(res.data[i]);
                        }
                        self.log.page++;
                    }
                });
                /* setTimeout(() => {
                    for (let i = 0; i < 10; i++) {
                    this.list.push(this.list.length + 1);
                    }
                    // 加载状态结束
                    this.loading = false;

                    // 数据全部加载完成
                    if (this.list.length >= 40) {
                    this.finished = true;
                    }
                }, 500); */
            }
        }
    })
</script>
<style>
</style>